import Maincontainer from "@/components/maincontainer";
import { defineComponent, nextTick, ref, DefineComponent } from "vue";
import { NCard, NButton, NImage, NGrid, NGi, NDropdown, useDialog, NForm, NFormItem, NInput,NUpload, } from "naive-ui"
import Mypage from "@/components/mypage/index"
import useTableIndex from "@/hooks/tableindex"
import image404 from "@/assets/image/shibai.webp"

export default defineComponent({
    name: "bgimageset",
    setup() {
        const dialog = useDialog()
        const {
            formValue,
            loading,
            total,
            tableData,
            editRef,
            pageRef,
            formRef,
            handleSearch,
            handleResetForm,
            handleView,
            handleEdit,
            handleCreate,
            refreshDelete
        } = useTableIndex()

        // 获取分页数据
        const getTableDataFunc = () => { }
        // 上传本地图片
        const addimage = () => {
            tableData.value.push({ name: "名字111", url: "https://wallpaper.infinitynewtab.com/wallpaper/2086.jpg" })
        }
        // 显示添加网络图片的弹窗
        const showNetworkImage = () => {
            const formData = ref({
                name: "",
                url: "",
            })
            const rules = {
                name: [{
                    required: true,
                    message: '请输入标题',
                    trigger: 'blur'
                },],
                url: [{
                    required: true,
                    message: '请输入地址',
                    trigger: 'blur'
                }]
            }
            const formref = ref<null | DefineComponent>(null)
            dialog.info({
                title: '添加网络图片',
                class:"mt-100px",
                content: () => <div class="h-22 px-5">
                    <NForm ref={formref} model={formData.value}>
                        <NFormItem label={"标题:"} path={"name"} rule={rules.name} label-placement={"left"}>
                            <NInput v-model={[formData.value.name, "value"]} placeholder={"请输入"}  />
                        </NFormItem>
                        <NFormItem label={"地址:"} path={"url"} rule={rules.url} label-placement={"left"}>
                            <NInput v-model={[formData.value.url, "value"]} placeholder={"请输入"}  />
                        </NFormItem>
                    </NForm>
                </div>,
                positiveText: '保存',
                negativeText: '取消',
                showIcon: false,
                onPositiveClick: async (e: MouseEvent) => {
                    console.log(formref.value,pageRef.value,"什么情况啊");
                    e.preventDefault()
                    let result = false
                    await formref.value?.validate((errors: boolean) => {
                        if (!errors) {
                            console.log(formData.value, "表单数据");
                            tableData.value.push(formData.value)
                            result = true
                        } else {
                            result = false
                        }
                    })
                    console.log("表单回调结束，回到上层");
                    return result
                },
            })
        }
        // 设置为桌面背景
        const setdesktopiamge = () => { }
        // 设置为登录背景
        const setloginimage = () => { }
        // 图片右键菜单
        const menuOptions = ref([
            { label: "复制url", key: "copyURL", },
            { label: "设置桌面壁纸", key: "desktopURL", },
            { label: "设置登录壁纸", key: "loginURL", },
            { label: "同时设置", key: "allURL", },
            { label: "删除", key: "delete", },
            { label: "重命名", key: "rename", },
        ])
        const selectedItem = ref(null)
        const showdropdown = ref(false)
        const menux = ref(0)
        const menuy = ref(0)
        const closeMenu = () => {
            showdropdown.value = false
            selectedItem.value = null
        }
        const handleMenuClick = (key: string) => {
            switch (key) {
                case "copyURL":
                    break;
                case "desktopURL":
                    setdesktopiamge()
                    break;
                case "loginURL":
                    setloginimage()
                    break;
                case "allURL":
                    setloginimage()
                    setdesktopiamge()
                    break;
            }
            closeMenu()
        }
        // 图片点击右键
        const showdropdownFunc = (event: MouseEvent, item: any) => {
            console.log("右键点击触发")
            event.preventDefault()
            selectedItem.value = item
            showdropdown.value = false
            nextTick(() => {
                menux.value = event.clientX
                menuy.value = event.clientY
                showdropdown.value = true
            })
        }
        return () => (<Maincontainer>
            <NCard content-style={{ display: "flex", alignItems: "center", padding: "10px" }}>
                <NUpload class="w-auto" show-file-list={false}
                    action={"https://www.mocky.io/v2/5e4bafc63100007100d8b70f"}
                >
                     <NButton type={"info"} onClick={addimage}>添加本地图片</NButton>
                </NUpload>
                <NButton class="ml-1" type={"info"} onClick={showNetworkImage}>添加网络图片</NButton>
            </NCard>
            <NCard class="flex-1 flex-shrink-0" content-style={{ display: "flex", alignItems: "flex-start", "flex-wrap": "wrap", padding: "10px" }}>
                <NGrid x-gap={20} y-gap={20} cols={7}>
                    {() => tableData.value.map((_item: any) => {
                        return <NGi class="h-40 juzhong1">
                            <div class="w-full h-full border border-gray-400 relative overflow-hidden" >
                                <NImage src={_item.url} object-fit={"contain"} class="absolute inset-0" onContextmenu={(e: MouseEvent) => showdropdownFunc(e, _item)} fallback-src={image404} />
                                <div class="absolute left-0 right-0 bottom-0 h-16px bg-gray-400 bg-opacity-50 text-center truncate">
                                    <span>{_item.name}</span>
                                </div>
                            </div>
                        </NGi>
                    })}
                </NGrid>
            </NCard>
            <NCard class="h-40px flex-shrink-0" content-style={{ display: "flex", justifyContent: "center", alignItems: "center", padding: 0 }}>
                <Mypage ref={pageRef} total={total.value} onGet={getTableDataFunc} />
            </NCard>
            <NDropdown
                placement={"bottom-start"}
                trigger={"manual"}
                x={menux.value}
                y={menuy.value}
                options={menuOptions.value}
                show={showdropdown.value}
                onClickoutside={closeMenu}
                onSelect={handleMenuClick}
            />
        </Maincontainer>)
    },
})
